<template>
  <div class="prescriptionAmount-page">
    <!-- 头部信息 -->
      <header>
        <div class="filter-part">
          <threeLevelLinkage v-model="filterObj.docInfo" :onChange="onDocInfoChange"/>
          <div class="filter-item">
            <label>药师：</label>
            <div class="content">{{pharmacistName}}</div>
            <Button type="primary" @click="showChoosePharmacistModal = true">
              <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>选择药师
            </Button>
          </div>
          <div class="filter-item">
            <label>选择日期：</label>
            <DatePicker v-model="filterObj.fromTime" :clearable="false"/>
            <span style="lineHeight: 2; padding: 0 5px">~</span>
            <DatePicker v-model="filterObj.endTime" :clearable="false"/>
          </div>
          <div class="filter-btn-group">
            <Button style="width:75px;height:35px;" type="primary" icon="ios-search"  @click="findPdNumber()">查询</Button>
            <Button style="width:75px;height:35px;" @click="reset" icon="icon-gengxin">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>重置
            </Button>
          </div>
        </div>
      </header>
      <div class="center-block">
        <div class="block-item">
          <div class="title">审核处方数</div>
          <div class="count">{{resObj.prescriptionsTotalNumber}}</div>
        </div>
        <div class="block-item">
          <div class="title">审核通过数</div>
          <div class="count">{{resObj.prescriptionsPassNumber}}</div>
        </div>
        <div class="block-item">
          <div class="title">审核驳回数</div>
          <div class="count">{{resObj.prescriptionsRejectNumber}}</div>
        </div>
        <div class="block-item">
          <div class="title">审核通过占比</div>
          <div class="count">{{Math.round((resObj.prescriptionsPassAccounted || 0) * 10000) / 100 + '%'}}</div>
        </div>
        <div class="block-item">
          <div class="title">审核驳回占比</div>
          <div class="count">{{Math.round((resObj.prescriptionsRejectAccounted || 0) * 10000) / 100 + '%'}}</div>
        </div>
      </div>
      <pharmacistChoose v-model="showChoosePharmacistModal" :onOk="onPharmacistOk"/>
      <div style="width: 100%; height: 400px;" v-if="sline">
        <basicChart :chartOption="chartOption"/>
      </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import pharmacistChoose from "@/components/choose/pharmacistChoose";
import threeLevelLinkage from "@/components/threeLevelLinkage";
import basicChart from "@/components/echarts/basicChart";
import Utils from '../../../utils';
import { DatePicker } from "view-design";
const filterObj = {
  docInfo: [],
  pharmacistId: null,
  fromTime: moment().subtract(1, 'months').format('YYYY-MM-DD'),
  endTime: moment().format('YYYY-MM-DD')
};
export default {
  components: {
    pharmacistChoose,
    threeLevelLinkage,
    basicChart,
    DatePicker
  },
  created() {
    let breadList = [
        { path: "/index", title: "首页" },
        {
            path: "",
            title: "统计分析"
        },
        {
            path: "/index/operation/statisticAnalysis/prescriptionAmount/index",
            title: "处方审核量统计"
        }
    ];
    this.$emit("changeBreadList", breadList);
  },
  data() {
    return {
      filterObj: this.deepClone(filterObj),
      showChoosePharmacistModal: false,
      pharmacistName: null,
      departmentList: [],
      resObj: {},
      sline:true,
      chartOption: {
        color: ['#ff6367', '#46C67F'],
        legend: {
            x: 50,
            top: '7%',
            textStyle: {
                // color: '#ffd285',
            },
            data: ['审核驳回数', '审核通过数']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0, 255, 233,0)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, {
                            offset: 1,
                            color: 'rgba(0, 255, 233,0)'
                        }],
                        global: false
                    }
                },
            },
        },
        grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            // containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: true
            },
            splitArea: {
                // show: true,
                color: '#f00',
                lineStyle: {
                    color: '#f00'
                },
            },
            axisLabel: {
                color: '#000'
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            data: [],

        }],
        yAxis: [{
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
                margin: 20,
                textStyle: {
                    color: '#d1e6eb',

                },
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
                name: '审核驳回数',
                type: 'line',
                showAllSymbol: true,
                lineStyle: {
                    normal: {
                      color: "#ff6367",
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(255,72,74,0.5)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,72,74,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(108,80,243, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: []
            },
            {
                name: '审核通过数',
                type: 'line',
                showAllSymbol: true,
                lineStyle: {
                    normal: {
                        color: "#00ca95",
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,202,149,0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,202,149,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: [],
            },
        ]
      },
    }
  },
  mounted() {
    this.findPdNumber();
  },
  methods: {
    onDocInfoChange({type, dictValue, dictName, record}) {
      // debugger
    },
    onPharmacistOk(record) {
      this.filterObj.pharmacistId = record.id;
      this.pharmacistName = record.name;
      this.showChoosePharmacistModal = false;
    },
    //重置
    reset() {
      this.filterObj = this.deepClone(filterObj);
      this.pharmacistName = null;
      this.findPdNumber();
    },
    findPdNumber() {
      const params = this.deepClone(this.filterObj);
      console.log(params)
      params.hospitalId = params.docInfo[0];
      params.departmentId = params.docInfo[1];
      params.doctorId = params.docInfo[2];
      delete params.docInfo;
      params.fromTime = Utils.getNowDateBySpecialFormat(this.filterObj.fromTime);
      params.endTime = Utils.getNowDateBySpecialFormat(this.filterObj.endTime);

      console.log(JSON.stringify(params));
      this.modalTableLoading = true;
      this.$axios
        .post(api.getPdNumber, params)
        .then(res => {
          if (res.data.code === 1) {
            let ret = res.data.object;
            this.resObj = ret;
            if(ret.rtMap){
              this.sline = true
              this.chartOption.xAxis[0].data = this.resObj.rtMap.datearr;
              this.chartOption.series[0].data = this.resObj.rtMap.rejectarr;
              this.chartOption.series[1].data = this.resObj.rtMap.passarr;
            }else{
              this.sline = false
            }
          } else {
            this.$Message.info(res.data.message);
          }
          this.modalTableLoading = false;
        })
        .catch(() => {
          this.modalTableLoading = false;
        });
    },
    deepClone(obj) {
        return JSON.parse(JSON.stringify(obj))
    },
  },
  watch: {
    docInfo: {
      handler(n) {
        console.log(n);
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.prescriptionAmount-page {
    width: 100%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    .filter-part {
      display: flex;
      flex-wrap: wrap;
      .filter-item {
        display: flex;
        margin: 10px 10px 10px 0;
        line-height: 32px;
        label {
          white-space: nowrap;
          line-height: 32px;
          padding-left: 5px;
          text-align: right;
        }
        .input {
          width: 220px;
        }
        .select {
          width: 70px;
        }
        .content {
          padding-right: 5px;
        }
      }
      .filter-btn-group {
        margin: 10px 10px 10px 0;
        flex: 0 0 auto;
      }
    }
    .center-block {
      margin: 20px 0;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: space-around;
      .block-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 18%;
        height: 150px;
        border:1px solid rgba(228,231,237,1);
        box-shadow:0px 2px 12px 0px rgba(0, 0, 0, 0.06);
        font-weight: 600;
        .title {
          font-size: 14px;
        }
        .count {
          padding-top: 10px;
          font-size: 24px;
        }
      }
    }
}
</style>
